<template>
  <div :class="$style.setWrap" class="setWrap">
    <div :class="$style.wrap1" class="borderB">
      <div>
        <h3 :class="$style.titleH3">可用余额(元)</h3>
        <p :class="$style.textDataRemain">100.06</p>
      </div>
      <a href="javascript:;" :class="$style.uBtn" class="uBtn uBtnInfo">开通出借人存管账户</a>
    </div>
    <div :class="$style.wrap2">
      <div :class="$style.item">
        <h3 :class="$style.titleH3">礼金</h3>
        <p :class="$style.textData">0.00</p>
      </div>
      <div :class="$style.item" class="borderL">
        <h3 :class="$style.titleH3">优惠券</h3>
        <p :class="$style.textData">0.00</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'pageAccountSetTop'
  }
</script>

<style lang="scss" module>
  .setWrap {
    margin: -180px 25px 30px;
    padding: 0 50px;
  }

  .wrap1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 180px;
    .titleH3 {
      color: #828a99;
      font-size: 36px;
    }
    .textDataRemain {
      margin-top: 12px;
      color: #ff7800;
      font-size: 54px;
    }
    .uBtn {
      font-size: 42px;
      padding: 20px 44px;
    }
  }

  .wrap2 {
    display: flex;
    align-items: center;
    height: 180px;
    .item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 44px;
      &:first-child {
        padding: 0 44px 0 0;
      }
    }
    .titleH3 {
      color: #293240;
      font-size: 42px;
    }
    .textData {
      color: #828a99;
      font-size: 48px;
    }
  }
</style>
